<template>
  <by-background background="linear-gradient(180deg, #FF8330, #FFCE58, #FFE773)">
    <image src="/static/credit-background.png" class="credit-background width-full" />
  </by-background>

  <by-navigation-bar title="信用担保" color="#ffffff" background="transparent" />

  <view class="page padding-lr-30 flex-column flex-center">
    <image src="/static/credit-logo.png" class="credit-log margin-bottom-20" />

    <text class="text-36 color-white margin-bottom-114">缴纳保障金 享专属特权</text>

    <view class="content flex-item width-full bg-white padding-lr-30 padding-top-40">
      <view class="text-28 color-third equity-list">
        <view v-for="(item,index) in equityList" :key="index">
          <text class="line-height">· </text>
          <text class="line-height">{{ item }}</text>
        </view>
      </view>

      <view class="flex-column flex-center margin-top-60 padding-lr-16">
        <view class="color-t1 text-bold">
          <text class="text-74">{{ shopInfo.price }}</text>
          <text class="text-44">元</text>
        </view>

        <view class="margin-top-50 width-full" v-if="isPlay">
          <by-button text="立 即 存 入" height="78rpx" font-size="32rpx" bold @click="deposit"/>
        </view>

        <view class="margin-top-50 width-full" v-else>
          <by-button text="提 现" height="78rpx" font-size="32rpx" type="gray" bold @click="jump('/pages/withdraw/index')"/>
        </view>
      </view>

      <view class="margin-top-60 text-26 color-t2 stipulate">
        <text class="line-height">保障金3个月后可随时全额提现，三个月内退款扣15%服务费，3个月后0服务费。存入保证金后即同意以下内容:</text>
        <view v-for="(item,index) in stipulateList" :key="index">
          <text class="line-height">{{index + 1}}.</text>
          <text class="line-height">{{item}}</text>
        </view>
      </view>
    </view>
  </view>

  <by-draw-bottom v-model="showDraw" watch-back>
    <by-recharge-method v-model="rechargeMethod"/>
    <view class="padding-30">
      <by-button height="72rpx" font-size="32rpx" bold text="确认支付" @click="handlePay" />
    </view>
  </by-draw-bottom>

  <by-dialog v-model="showDialog" title="提示" content="请先申请技师入驻" confirm-text="立即入驻" @confirm=" jump('/pages/enter/index')" />
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import { jump, loading, pay, toast } from '@/common/util'
import { detailTechnician, getDeposit, payByGood, payByGoodH5, toUserInfo } from '@/common/api'
import type { AnyObject, IPayType } from '@/common/types'

const equityList = [
  '保障金醒目标识;',
  '可以被优质用户优先查看;',
  '服务可自动服务担保;',
  '平台活动、平台福利、优先领取和发放;',
  '平台最新功能首批体验，参与平台功能设计讨论;'
]

const stipulateList = [
  '在交流以及服务过程中，不会有恶意欺骗行为;',
  '如果在联系或预约确认已经达成服务约定后，不会随意毁约;',
  '在对方没有同意的情况下，不会公开对方隐私;如果违反了其中一条或欺骗等行为，经客服同双方调查确认后，可以扣除保证金。',
]

const shopInfo = shallowRef<AnyObject>({})
async function handleGetDeposit() {
  const res = await getDeposit()
  shopInfo.value = res.data
}
handleGetDeposit()
getDetail()

const showDraw = ref(false)
const rechargeMethod = ref<IPayType>('WXPAY')
const isPlay = ref(true)

const showDialog = ref(false)
async function deposit() {
  const res = await toUserInfo()
  if (res.data.userType !== 1) {
    showDialog.value = true
    return
  }
  showDraw.value = true
}

const context = getCurrentInstance()
async function handlePay() {
  const load = loading('支付中...')
  showDraw.value = false

  /* #ifdef H5*/
  let res = await payByGoodH5({
    gno: shopInfo.value.gno,
    channelType: 'WXPAY',
    openid: useUserStore().openid
  })
  /* #endif*/
  /* #ifdef APP-PLUS*/
  const res = await payByGood({
    gno: shopInfo.value.gno,
    channelType: rechargeMethod.value
  })
  /* #endif*/
  const { data } = res
  await pay(data.payParams, rechargeMethod.value, context)
  load.hide()
  toast('支付成功')
  isPlay.value = !isPlay.value
}

async function getDetail() {
  const res = await detailTechnician({})
  isPlay.value = res.data.warrantyStatus === '0'
}
</script>

<style scoped lang="scss">
@include setMargin(bottom, 114);

@include setMargin(top, 60);

@include setPadding(lr, 16);

@include setFontSize(74);

.credit-background{
  height: 574rpx;
}

.page{
  @include position(absolute, 216rpx, 0, 0, 0);

  .credit-log{
    width: 64rpx;
    height: 64rpx;
  }

  .content{
    border-radius: 16rpx 16rpx 0 0;
  }

  .line-height{
    line-height: 44rpx;
  }

}
</style>
